<template>
  <!--使用draggable组件-->
  <div class="draggableContent">
    <div class="PageContent">
      <div class="main-wrap">
        <draggable v-model="mainWrap" chosenClass="chosen" forceFallback="true" group="main" animation="1000" @start="onStart" @end="onEnd">
          <transition-group>
            <a-card v-for="element in mainWrap" :key="element.id" :title="element.title" :class="element.class">
              <!-- 快速创建 -->
              <div v-if="element.id == 1" slot="extra" class="create-wrap">
                <a-space size="large">
                  <span value="small">项目</span>
                  <a href="#" value="large"> 去创建</a>
                  <span>个人档案/服务档案</span>
                  <a href="#"> 去创建</a>
                </a-space>
              </div>
              <!-- 我的工作栏 -->
              <div v-if="element.id == 3" class="workBar-wrap">
                <a-row :gutter="16">
                  <a-col :span="12">
                    <span>进行中的</span><br>
                    <a-space size="middle">
                      <span>个人档案</span>
                      <a href="#">去查看</a>
                    </a-space>
                    <br>
                    <a-space size="middle">
                      <span>个人档案</span>
                      <a href="#">去查看</a>
                    </a-space>
                    <a-tabs default-active-key="1" @change="callback">
                      <a-tab-pane key="1" tab="项目">
                        <div class="workTab">
                          <div>
                            <div>项目</div>
                            <div>0</div>
                          </div>
                          <div>
                            <div>咨询</div>
                            <div>12</div>
                          </div>
                          <div>
                            <div>个案</div>
                            <div>9</div>
                          </div>
                          <div>
                            <div>长期探访</div>
                            <div>13</div>
                          </div>
                          <div>
                            <div>危机介入</div>
                            <div>14</div>
                          </div>
                        </div>
                      </a-tab-pane>
                      <a-tab-pane key="2" tab="个人" force-render>
                        Content of Tab Pane 2
                      </a-tab-pane>
                    </a-tabs>
                  </a-col>
                  <a-col :span="12">
                    <a-card style="width: 100%" :bordered="false" :hoverable="false">
                      <a-badge slot="title" :count="5" style="margin-left:0">
                        任务提醒
                      </a-badge>
                      <a slot="extra" href="#">查看更多</a>

                      <a-table :columns="columns" :data-source="data" :pagination="false" size="small">
                      </a-table>

                    </a-card>
                  </a-col>
                </a-row>
              </div>
              <!-- 产出与成效 -->
              <div v-if="element.id == 5" class="output-wrap">
                <a-card title="服务产出">
                  <a-tabs default-active-key="1" @change="callback">
                    <a-tab-pane key="1" tab="项目">
                      <a-row :gutter="16">
                        <a-col :span="2">
                          <a-statistic title="数量" :value="12" />
                        </a-col>
                        <a-col :span="14">
                          <a-table :columns="columns" :data-source="data" :pagination="false" size="small">
                          </a-table>
                        </a-col>
                        <a-col :span="8">
                          <div id="workChart" class="output_echarts"></div>
                        </a-col>
                      </a-row>
                    </a-tab-pane>
                    <a-tab-pane key="2" tab="个人" force-render>
                      Content of Tab Pane 2
                    </a-tab-pane>
                  </a-tabs>
                </a-card>
                <a-card title="服务成就" style="background: #F9F9F9;">
                  <a-tabs default-active-key="1" @change="callback">
                    <a-tab-pane key="1" tab="项目">
                      <a-row :gutter="16">
                        <a-col :span="12">
                          <div id="process" class="output_echarts"></div>

                        </a-col>
                        <a-col :span="12">
                          <div id="end" class="output_echarts"></div>

                        </a-col>
                      </a-row>
                    </a-tab-pane>
                    <a-tab-pane key="2" tab="个人" force-render>
                      Content of Tab Pane 2
                    </a-tab-pane>
                  </a-tabs>
                </a-card>
              </div>
            </a-card>
          </transition-group>

        </draggable>
      </div>
      <div class="side-wrap">
        <draggable v-model="sideWrap" chosenClass="chosen" forceFallback="true" group="side" animation="1000" @start="onStart" @end="onEnd">
          <transition-group>
            <a-card v-for="element in sideWrap" :key="element.id" :title="element.title" :class="element.class">

              <!-- 专业工具集 -->
              <div v-if="element.id ==2">
                <a-row :gutter="16">
                  <a-col :span=12>
                    <a-space size="middle">
                      <a-icon type="database" theme="twoTone" two-tone-color="#ee6f2d" />
                      <span>专业服务表格</span>
                      <a href="#">查看</a>
                    </a-space>
                  </a-col>
                  <a-col :span=12>
                    <a-space size="middle">
                      <a-icon type="database" theme="twoTone" two-tone-color="#ee6f2d" />
                      <span value="large">服务对象填写表格</span>
                      <a href="#">查看</a>
                      <a href="#">下载</a>
                    </a-space>
                  </a-col>
                </a-row>
                <a-row :gutter="[16,16]">
                  <a-col :span=12>
                    <a-space size="middle">
                      <a-icon type="database" theme="twoTone" two-tone-color="#ee6f2d" />
                      <span value="large">特定情况需求评估指引</span>
                      <a href="#">查看</a>
                    </a-space>
                  </a-col>
                  <a-col :span=12>
                    <a-space size="middle">
                      <a-icon type="database" theme="twoTone" two-tone-color="#ee6f2d" />
                      <span value="large">系统使用教学示范</span>
                      <a href="#">查看</a>
                    </a-space>
                  </a-col>
                </a-row>
              </div>
              <!-- 统计与报表 -->
              <div v-if="element.id == 4" class="report-wrap">
                <a-row :gutter="16">
                  <a-col :span=12 style="padding: 0 10px">
                    <a-space size="middle">
                      <a-icon type="database" theme="twoTone" two-tone-color="#ee6f2d" />
                      <span>服务数据统计</span>
                    </a-space>
                  </a-col>
                  <a-col :span=12>
                    <a-space size="middle">
                      <a-icon type="pie-chart" theme="twoTone" two-tone-color="#ee6f2d" />
                      <span value="large">工作报表</span>
                    </a-space>
                  </a-col>
                </a-row>
              </div>
              <!-- 申请与审批 -->
              <div v-if="element.id == 6" class="Approve-wrap">
                <a-card title="申请" :bordered="false" style="background: #F9F9F9;">
                  <a-row :gutter="[16,16]">
                    <a-col :span=12>
                      <a-space size="middle">
                        <a-icon type="database" theme="twoTone" two-tone-color="#ee6f2d" />
                        <span>个人档案</span>
                        <a href="#">查看</a>
                        <a href="#">删除</a>
                      </a-space>
                    </a-col>
                    <a-col :span=12>
                      <a-space size="middle">
                        <a-icon type="database" theme="twoTone" two-tone-color="#ee6f2d" />
                        <span value="large">服务档案</span>
                        <a href="#">查看</a>
                        <a href="#">删除</a>
                        <a href="#">委派</a>
                      </a-space>
                    </a-col>
                  </a-row>
                </a-card>
                <a-card title="审批" :bordered="false">
                  <a-tabs default-active-key="1" @change="callback">
                    <a-tab-pane key="1" tab="申请者" force-render>
                      <div class="applicant">
                        <div>已提出申请的清单</div>
                        <div>已提出申请的清单</div>
                      </div>
                    </a-tab-pane>
                    <a-tab-pane key="2" tab="审批者" force-render>
                      Content of Tab Pane 2
                    </a-tab-pane>
                  </a-tabs>
                </a-card>
              </div>
              <!-- 系统管理 -->
              <div v-if="element.id == 7" class="manage-wrap">
                <a-row :gutter="[16,16]">
                  <a-col :span="12">
                    <div class="manageItem">
                      <a-space>
                        <a-icon type="solution" />
                        <span>角色与权限管理</span>
                      </a-space>
                    </div>
                  </a-col>
                  <a-col :span="12">
                    <div class="manageItem">
                      <a-space>
                        <a-icon type="solution" />
                        <span>账户管理</span>
                      </a-space>
                    </div>
                  </a-col>
                </a-row>
                <a-row :gutter="[16,16]">
                  <a-col :span="12">
                    <div class="manageItem">
                      <a-space>
                        <a-icon type="solution" />
                        <span>表格自定义设置</span>
                      </a-space>
                    </div>

                  </a-col>
                  <a-col :span="12">
                    <div class="manageItem">
                      <a-space>
                        <a-icon type="solution" />
                        <span>档案编号设置</span>
                      </a-space>
                    </div>

                  </a-col>
                </a-row>
                <a-row :gutter="[16,16]">
                  <a-col :span="12">
                    <div class="manageItem">
                      <a-space>
                        <a-icon type="solution" />
                        <span>档案痕迹管理</span>
                      </a-space>
                    </div>

                  </a-col>
                  <a-col :span="12">
                    <div class="manageItem">
                      <a-space>
                        <a-icon type="solution" />
                        <span>档案下载</span>
                      </a-space>
                    </div>

                  </a-col>
                </a-row>
              </div>
              <!-- 系统订阅 -->
              <a v-if="element.id == 8" slot="extra" href="#">查看更多</a>
              <div v-if="element.id == 8" class="subscribe-wrap">
                <a-row :gutter="16">
                  <a-col :span="12">
                    <a-card title="系统名称" :bordered="false" :hoverable="false">
                      <p>系统名称</p>
                      <a-row :gutter="16">
                        <a-col :span="12"><span>INGI-实用</span></a-col>
                        <a-col :span="12"><span>INGI-实用</span></a-col>
                      </a-row>
                      <a-row :gutter="[16,16]">
                        <a-col :span="12"><span>INGI-实用</span></a-col>
                        <a-col :span="12"><span>INGI-实用</span></a-col>
                      </a-row>
                    </a-card>
                  </a-col>
                  <a-col :span="12">
                    <a-card>
                      <p>订阅时间</p>
                      <p>2020年12月xx—</p>
                    </a-card>
                  </a-col>
                </a-row>

              </div>
            </a-card>
          </transition-group>
        </draggable>
      </div>
    </div>
  </div>

</template>
<script>
const columns = [{
  title: '任务关键词',
  dataIndex: 'name',
  align: 'center',
},
{
  title: '任务类型',
  dataIndex: 'address',
  align: 'center',
},
{
  title: '截止日期',
  dataIndex: 'userName',
  align: 'center',
},
];
const data = [
  {
    key: '1',
    name: '待处理审核事件概要标题',
    address: '个案',
    userName: '2020年9月14'
  },
  {
    key: '2',
    name: '待处理审核事件概要标题',
    address: '危机介入',
    userName: '2020年9月18'
  },
  {
    key: '3',
    name: '待处理审核事件概要标题',
    address: '个案',
    userName: '2020年9月20'
  },
];
import draggable from "vuedraggable";
export default {
  components: {
    draggable,
  },
  data() {
    return {
      data,
      columns,
      drag: false,
      tstyle:{"color": "#0785fd","font-weight": "bold"},
      //定义要被拖拽对象的数组
      mainWrap: [
        {
          title: "快速创建",
          main: "cn",
          id: 1,
          name: "www.itxst.com",
          class: "create",
        },
        {
          title: "我的工作栏",
          main: "cn",
          id: 3,
          name: "www.taobao.com",
          class: "workBar",
        },
        {
          title: "产出与成效",
          main: "cn",
          id: 5,
          name: "www.google.com",
          class: "output",
        }
      ],
      sideWrap: [

        {
          title: "专业工具箱",
          main: "cn",
          id: 2,
          name: "www.baidu.com",
          class: "ToolBox",
        },
        {
          title: "统计与报表",
          main: "cn",
          id: 4,
          name: "www.google.com",
          class: "report",
        },
        {
          title: "申请与审批",
          main: "cn",
          id: 6,
          name: "www.google.com",
          class: "Approve"
        },
        {
          title: "系统管理",
          main: "cn",
          id: 7,
          name: "www.google.com",
          class: "manage"
        },
        {
          title: "系统订阅",
          main: "cn",
          id: 8,
          name: "www.google.com",
          class: "subscribe"
        },
      ],
    };
  },
  watch: {},
  methods: {
    // 工作指标完成
    workChart() {
      let myChart = this.$echarts.init(document.getElementById("workChart"));
      // 绘制表格
      myChart.setOption({
        color: ["#1890FF", "#FACC14"],
        title: {
          text: "工作指标完成%",
        },
        // legend: {
        //   y: "bottom",
        //   data: ["百货", "电子", "服装"],
        // },
        xAxis: [
          {
            type: "category",
            data: ['咨询', '个案', '长期探访', '危机介入'],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "百货",
            type: "bar",
            stack: "1",
            barWidth: 30,
            data: [10, 14, 17, 8],
          },
          {
            name: "电子",
            type: "bar",
            stack: "1",
            data: [16, 12, 9, 22],
          },
        ],
      });
    },
    // 过程介入目标达成
    processChart() {
      let myChart = this.$echarts.init(document.getElementById("process"));
      // 绘制表格
      myChart.setOption({
        color: ["#1890FF"],
        title: {
          text: "过程介入目标达成",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "0",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [
              "咨询",
              "个案",
              "长期探访",
              "危机介入",
            ],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            show: true,
            axisLine: { show: false },

            axisTick: {
              //y轴刻度线
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
              },
            },
            type: "value",
          },
        ],
        series: [
          {
            name: "过程介入目标达成",
            type: "bar",
            barWidth: "30%",
            data: [300, 780, 900, 520],
          },
        ],
      });
    },
    // 结束服务目标达成
    endChart() {
      // 基于准备好的dom，初始化echarts实例
      let endMyChart = this.$echarts.init(document.getElementById("end"));
      // 绘制表格
      endMyChart.setOption({
        color: ["#1890FF"],
        title: {
          text: "结束服务目标达成",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "0",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [
              "咨询",
              "个案",
              "长期探访",
              "危机介入",
            ],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            show: true,
            axisLine: { show: false },

            axisTick: {
              //y轴刻度线
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
              },
            },
            type: "value",
          },
        ],
        series: [
          {
            name: "结束服务目标达成",
            type: "bar",
            barWidth: "30%",
            data: [80, 130, 40, 100],
          },
        ],
      });
    },
    //开始拖拽事件
    onStart() {
      this.drag = true;
    },
    //拖拽结束事件
    onEnd() {
      this.drag = false;
    },
  },
  mounted() {
    this.processChart();
    this.endChart();
    this.workChart();
  },
};
</script>
<style lang="less" scope>
.output_echarts {
  width: 80%;
  height: 200px;
}
.draggableContent {
  padding-top: 100px;
  background: #f0f1f4;
  position: relative;
  .PageContent {
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;

    .main-wrap {
      flex-grow: 1;
      padding-right: 8px;
    }
    .side-wrap {
      width: 540px;
      padding-left: 8px;
      .Approve-wrap {
        .applicant {
          display: flex;
          div {
            flex: 1;
            margin: 8px;
            padding: 8px;
            text-align: center;

            background: #f9f9f9;
            border: 1px solid #cbcbcb;
          }
        }
      }
      .manage-wrap {
        .manageItem {
          background: #f9f9f9;
          padding: 8px;
        }
      }
    }
      .create-wrap {
        margin-right: 120px;
        span {
          font-size: 18px;
        }
        a {
          font-size: 16px;
        }
      }
    .workBar-wrap {
      .workTab {
        display: flex;
        div {
          flex: 1;
        }
      }
    }

    .ant-card-head-title {
      font-weight: bold !important;
    }
  }

  //
  .ant-card-head-title {
    overflow: initial;
  }
  .ant-badge-count {
    right: -12px !important;
  }
}
</style>
